<template>
    <div id='system-user'>
        <!-- <h1 class="card-title">
            <p><span>产品配置管理</span></p>
        </h1> -->
        <div class="loading-min-height">
            <div class='detail-info'>
                <!-- 支持的设备型号 -->
                <div class="card-content">
                    <div class="sub-title">
                        <span class='title'>支持的设备型号</span>
                        <span @click='showEditModels' class="button auto transparent tar">配置支持的设备型号</span>
                    </div>
                    <loading v-show='loading_models'></loading>
                    <p class='no-data' v-if='!loading_models && !models.length'>暂无数据</p>
                    <ul class="tag-list" v-if='!loading_models && models.length'>
                        <li class="tag__item" v-for='item in models' v-if='item.status === 1'>{{item.model}}</li>
                    </ul>
                </div>

                <!-- 支持的借款周期 -->
                <div class="card-content">
                    <div class="sub-title">
                        <span class='title'>支持的借款周期</span>
                        <span @click='showEditCycles' class="button auto transparent tar">配置支持的借款周期</span>
                    </div>
                    <loading v-show='loading_cycles'></loading>
                    <p class='no-data' v-if='!loading_cycles && !cycles.length'>暂无数据</p>
                    <ul class="tag-list" v-if='!loading_cycles && cycles.length'>
                        <li class="tag__item" v-for='item in cycles' v-if='item.status === 1'>{{item.days}}天</li>
                    </ul>
                </div>

                <!-- 支持的借款周期 -->
                <div class="card-content">
                    <div class="sub-title">
                        <span class='title'>配置利息及额度方案</span>
                        <span @click='showAddLimit' class="button auto transparent tar">新增配置</span>
                    </div>
                    <loading v-show='loading_limits'></loading>
                    <p class='no-data' v-if='!loading_cycles && !limits.length'>暂无数据</p>
                    <div class="table-list" v-if='limits.length'>
                        <table>
                            <thead class="table-list__head">
                                <tr>
                                    <th>借款期限</th>
                                    <th>服务费比例</th>
                                    <th>设备</th>
                                    <th>额度</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody class='table-list__body have-border'>
                                <tr v-for='item in limits'>
                                    <td>{{ item.cycleDays || placeholder }}天</td>
                                    <td>{{ item.serviceCharge | toPercent }}</td>
                                    <td>{{ item.deviceModel || placeholder }}</td>
                                    <td>{{ item.amount | toYuan }}</td>
                                    <td>
                                        <div class='option-box'>
                                            <span class='option-button' @click='showEditLimit(item)'>编辑</span>
                                            <span class='option-button' @click='showDeleteLimit(item)'>删除</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 展期次数配置 -->
                <div class="card-content">
                    <div class="sub-title">
                        <span class='title'>展期次数配置</span>
                        <span @click='show_modal_extend = true' class="button auto transparent tar">配置展期次数</span>
                    </div>
                    <loading v-show='loading_extend'></loading>
                    <p class='no-data' v-if='!loading_extend && !extendTime'>暂无数据</p>
                    <ul class="result-info__list" v-if='!loading_extend && extendTime'>
                        <!-- <li class="result-info__item">
                            <div class="result-info__key">个人最高展期次数</div>
                            <div class="result-info__value">{{extendTime.extendTimes || placeholder}}</div>
                        </li>
                        <li class="result-info__item">
                            <div class="result-info__key">单次展期最高期数</div>
                            <div class="result-info__value">{{extendTime.onceExtendTimes || placeholder}}</div>
                        </li> -->
                        <li class="result-info__item">
                            <div class="result-info__key">单期最高天数</div>
                            <div class="result-info__value">{{extendTime.extendDays || placeholder}}</div>
                        </li>
                        <li class="result-info__item">
                            <div class="result-info__key">展期开始时间</div>
                            <div class="result-info__value">{{extendTime.extendStartDay || placeholder}}</div>
                        </li>
                    </ul>
                </div>

                <!-- 展期次数配置 -->
                <div class="card-content">
                    <div class="sub-title">
                        <span class='title'>逾期罚息配置</span>
                        <span @click='show_modal_overdue = true' class="button auto transparent tar">配置逾期罚息</span>
                    </div>
                    <loading v-show='loading_overdue'></loading>
                    <p class='no-data' v-if='!loading_overdue && !overdue'>暂无数据</p>
                    <ul class="tag-list" v-if='!loading_overdue && overdue'>
                        <li class="tag__item">{{overdue | toPercent}}</li>
                    </ul>
                </div>
            </div>
        </div>

        <modal 
            title='配置支持的设备型号'
            :show='show_modal_model' 
            :loading='loading_save_model' 
            confirm-text='保存'
            @close='closeEditModels'
            @confirm='saveModel'>
            <div class="modal-form-wrap">
                <ul class='modal-form' v-if='models.length'>
                    <li class='form-item' v-for='item in models'>
                        <span class="form-item__key">{{item.model}}</span>
                        <div class="form-item__value">
                            <radio-group v-model='item.status'>
                                <radio :value='1'>支持</radio>
                                <radio :value='0'>不支持</radio>
                            </radio-group>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='配置支持的借款周期'
            :show='show_modal_cycle' 
            :loading='loading_save_cycles' 
            confirm-text='保存'
            @close='closeEditCycles'
            @confirm='saveCycle'>
            <div class="modal-form-wrap">
                <ul class='modal-form' v-if='cycles.length'>
                    <li class='form-item' v-for='item in cycles'>
                        <span class="form-item__key">{{item.days}}天</span>
                        <div class="form-item__value">
                            <radio-group v-model='item.status'>
                                <radio :value='1'>支持</radio>
                                <radio :value='0'>不支持</radio>
                            </radio-group>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='配置展期次数'
            :show='show_modal_extend' 
            :loading='loading_save_extend' 
            confirm-text='保存'
            @close='show_modal_extend=false'
            @confirm='saveExtend'>
            <div class="modal-form-wrap modal-limit">
                <ul class='modal-form'>
                    <!-- <li class='form-item'>
                        <span class="form-item__key">个人最高展期次数</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入个人最高展期次数" v-model='extendTimeSet.extendTimes'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">单次展期最高期数</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入单次展期最高期数" v-model='extendTimeSet.onceExtendTimes'>
                        </div>
                    </li> -->
                    <li class='form-item'>
                        <span class="form-item__key">单期最高天数</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入单期最高天数" v-model='extendTimeSet.extendDays'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">展期开始时间</span>
                        <div class="form-item__value">
                            <select-box v-model='extendTimeSet.extendStartDay' :text='extendTimeSet.extendStartDay'>
                                <select-option value='当日' text='当日'></select-option>
                                <select-option value='次日' text='次日'></select-option>
                            </select-box>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='配置逾期罚息'
            :show='show_modal_overdue' 
            :loading='loading_save_overdue' 
            confirm-text='保存'
            @close='show_modal_overdue=false'
            @confirm='saveOverdue'>
            <div class="modal-form-wrap modal-limit">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">逾期罚息</span>
                        <div class="form-item__value">
                            <p class="unit">%</p>
                            <input type="text" placeholder="请输入逾期罚息" v-model='overdueSet'>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal 
            title='配置利息及额度方案'
            :show='show_modal_limit' 
            :loading='loading_save_limits' 
            confirm-text='保存'
            @close='show_modal_limit=false'
            @confirm='saveLimit'>
            <div class="modal-form-wrap modal-limit">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">借款周期</span>
                        <div class="form-item__value" v-if='curLimit.cycles'>
                            <select-group v-model='curLimit.cycles'>
                                <select-option v-for='item in cycles' :key='item.id' :value='item.id' :text='item.days + "天"' v-if='item.status'></select-option>
                            </select-group>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">设备型号</span>
                        <div class="form-item__value" v-if='curLimit.device'>
                            <select-group fixed v-model='curLimit.device'>
                                <select-option v-for='item in models' :key='item.id' :value='item.id' :text='item.model' v-if='item.status'></select-option>
                            </select-group>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">服务费比例</span>
                        <div class="form-item__value">
                            <p class='unit'>%</p>
                            <input type="text" placeholder="请输入服务费比例" v-model='curLimit.serviceChargePercent'>
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">可借额度</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入可借额度" v-model='curLimit.amoutToYuan'>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <confirm
            title='确认删除此条利息及额度方案'
            :show='show_confirm_delete_limit'
            :loading='loading_delete_limits'
            @close='show_confirm_delete_limit = false'
            @confirm='deleteLimit'></confirm>
    </div>
</template>

<script>    
    import { Promise } from 'es6-promise'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import datePicker from '../components/DatePicker.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import loading from '../components/Loading.vue'
    import tab from '../components/Tab.vue'
    import tabBox from '../components/TabBox.vue'
    import checkBox from '../components/CheckBox.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import echarts from '../components/Echarts.vue'
    import toYuan from '../filters/filter-toYuan'
    import toPercent from '../filters/filter-toPercent'
    import  { mapGetters, mapActions }  from 'vuex'
    import { systemApi, allApi, youxinApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            radioGroup,
            radio,
            selectGroup,
            selectOption,
            echarts,
            loading,
            modal,
            tab,
            tabBox,
            checkBox,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            toPercent,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                show_modal_cycle:false,
                show_modal_model:false,
                show_modal_limit:false,
                show_modal_extend:false,
                show_modal_overdue:false,
                show_confirm_delete_limit:false,
                models:[],
                modelsSet:[],
                cycles:[],
                cyclesSet:[],
                limits:[],
                extendTime:'',
                extendTimeSet:'',
                overdue:'',
                overdueSet:'',
                curLimit:{},
                placeholder:'--',
                loading_model:false,
                loading_limits:false,
                loading_extend:false,
                loading_model:false,
                loading_overdue:false,
                loading_save_model:false,
                loading_save_cycles:false,
                loading_save_limits:false,
                loading_delete_limits:false,
                loading_save_extend:false,
                loading_save_overdue:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function
            showEditModels(){
                this.show_modal_model = true
                this.modelsSet = _.cloneDeep(this.models)
            },
            showEditCycles(){
                this.show_modal_cycle = true
                this.cyclesSet = _.cloneDeep(this.cycles)
            },
            closeEditModels(){
                this.show_modal_model = false
                this.models = _.cloneDeep(this.modelsSet)
            },
            closeEditCycles(){
                this.show_modal_cycle = false
                this.cycles = _.cloneDeep(this.cyclesSet)
            },
            saveModel(){
                this.loading_save_model = true
                systemApi.saveModels({
                    data:JSON.stringify(this.models)
                })
                .then(result=>{
                    this.loading_save_model = false
                    this.show_modal_model = false
                    this.getModels()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_model = false
                })
            },
            saveCycle(){
                this.loading_save_cycles = true
                systemApi.saveCycles({
                    data:JSON.stringify(this.cycles)
                })
                .then(result=>{
                    this.loading_save_cycles = false
                    this.show_modal_cycle = false
                    this.getCycles()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_cycles = false
                })
            },
            showEditLimit(item){
                this.curLimit = item
                this.curLimit.amoutToYuan = toYuan(item.amount,'int')
                this.curLimit.device = {}
                this.curLimit.cycles = {}
                this.curLimit.device.value = item.deviceId
                this.curLimit.device.text = item.deviceModel
                this.curLimit.cycles.value = item.cycleId
                this.curLimit.cycles.text = item.cycleDays + '天'
                this.curLimit.serviceChargePercent = (item.serviceCharge / 10).toFixed()
                this.show_modal_limit = true
            },
            showAddLimit(){
                this.curLimit.amoutToYuan = ''
                this.curLimit.device = {}
                this.curLimit.cycles = {}
                this.curLimit.device.value = ''
                this.curLimit.device.text = '请选择设备'
                this.curLimit.cycles.value = ''
                this.curLimit.cycles.text = '请选择周期'
                this.curLimit.serviceChargePercent = ''
                this.show_modal_limit = true
            },
            showDeleteLimit(item){
                this.curLimit = item
                this.show_confirm_delete_limit = true
            },
            saveLimit(){
                if(this.curLimit.cycles.value === ''){
                    this.setMsgTip({
                        text:'请选择周期',
                        type:'warn'
                    })
                    return
                }
                if(this.curLimit.device.value === ''){
                    this.setMsgTip({
                        text:'请选择设备',
                        type:'warn'
                    })
                    return
                }
                if(this.curLimit.amoutToYuan === ''){
                    this.setMsgTip({
                        text:'请输入可借额度',
                        type:'warn'
                    })
                    return
                }
                if(this.curLimit.serviceCharge === ''){
                    this.setMsgTip({
                        text:'请输入服务费比例',
                        type:'warn'
                    })
                    return
                }
                this.loading_save_limits = true
                systemApi.saveDeviceCycle({
                    deviceId:this.curLimit.device.value,
                    cycleId:this.curLimit.cycles.value,
                    amount:(this.curLimit.amoutToYuan * 100).toFixed(),
                    serviceCharge:(this.curLimit.serviceChargePercent * 10).toFixed(),
                })
                .then(result=>{
                    this.show_modal_limit = false
                    this.loading_save_limits = false
                    this.getLimit()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_limits = false
                })
            },
            saveExtend(){
                this.loading_save_extend = true
                systemApi.saveExtendTimes(this.extendTimeSet)
                .then(result=>{
                    this.show_modal_extend = false
                    this.loading_save_extend = false
                    this.getExtend()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_extend = false
                })
            },
            saveOverdue(){
                this.loading_save_overdue = true
                systemApi.saveOverdueCharge({
                    overdueCharge:this.overdueSet === '' ? '' : (this.overdueSet * 10).toFixed(0),
                })
                .then(result=>{
                    this.show_modal_overdue = false
                    this.loading_save_overdue = false
                    this.getOverdue()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save_overdue = false
                })
            },
            deleteLimit(){
                this.loading_delete_limits = true
                systemApi.delDeviceCycle({
                    id:this.curLimit.id,
                })
                .then(result=>{
                    this.show_confirm_delete_limit = false
                    this.loading_delete_limits = false
                    this.getLimit()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_delete_limits = false
                })
            },
            getModels(){
                this.loading_models = true
                systemApi.allModels()
                .then(result=>{
                    this.models = result
                    this.modelsSet = _.clone(result)
                    this.loading_models = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_models = false
                })
            },
            getExtend(){
                this.loading_extend = true
                systemApi.showExtendTimes()
                .then(result=>{
                    this.extendTime = result
                    this.extendTimeSet = _.cloneDeep(result)
                    this.loading_extend = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_extend = false
                })
            },
            getOverdue(){
                this.loading_overdue = true
                systemApi.showOverdueCharge()
                .then(result=>{
                    this.overdue = result
                    this.overdueSet = (result/10).toFixed(0)
                    this.loading_overdue = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_overdue = false
                })
            },
            getCycles(){
                this.loading_cycles = true
                systemApi.allCycles()
                .then(result=>{
                    this.cycles = result
                    this.cyclesSet = _.clone(result)
                    this.loading_cycles = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_cycles = false
                })
            },
            getLimit(){
                this.loading_limits = true
                systemApi.deviceCycleList()
                .then(result=>{
                    this.limits = result
                    this.loading_limits = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_limits = false
                })
            },
        },
        created(){
            this.getModels()
            this.getExtend()
            this.getCycles()
            this.getLimit()
            this.getOverdue()
        }
    }
</script>

<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #system-user{

    }
    body .sub-title .title{
        padding:16px 0;
    }
    body .sub-title{
        color:#333;
        font-size:16px;
        padding:0 20px;
    }
    .button{
        font-size:16px;
    }
     body .result-info__key{
        color:#333;
    }
</style>
